<template>
  <div class="flex items-center">
    <label class="inline-flex items-center cursor-pointer">
      <input
        type="checkbox"
        v-model="currentValue"
        class="sr-only peer"
        @change="$emit('input', currentValue)"
      >
      <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
      <span class="ml-3 text-sm font-medium text-gray-700">
        {{ currentValue ? '是' : '否' }}
      </span>
    </label>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  emits: ['input'],
  setup(props) {
    const currentValue = ref(props.value);

    // 监听外部值变化
    watch(
      () => props.value,
      (newVal) => {
        currentValue.value = newVal;
      }
    );

    return {
      currentValue
    };
  }
};
</script>
    